<template>
<!-- 邀请好友 -->
<div id="regist">
	<img src="../../assets/img/invite.jpg">
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>用户名</label>
			<input type="text" v-model="username" class="mui-input-clear" placeholder="请输入用户名">
		</div>
		<div class="mui-input-row">
			<label>密码</label>
			<input type="password" v-model="password" class="mui-input-password" placeholder="请输入密码">
		</div>
		<div class="mui-button-row">
			<button type="button" class="mui-btn mui-btn-primary" @tap="sureRegist">确定</button>
		</div>
	</form>
	<br>
	<br>
	<!-- 复制邀请连接 -->
	<button type="button" class="mui-btn mui-btn-warning" v-clipboard:copy="copyLink" v-clipboard:success="onCopy" v-clipboard:error="onError">复制邀请链接</button>
</div>
</template>

<script>
import {getCenter,registApi} from "@/api/my"
export default{
	name:"regist",
	data(){
		return{
			username:"",
			password:"",
			userid:"",
		}
	},
	computed:{
		copyLink(){
			let href = location.href.split("#")[0];
			return "点击链接注册，快来和我一起赚钱："+href.slice(0,href.lastIndexOf("/"))+"/invite.html?"+btoa(this.userid)
		}
	},
	mounted(){
		mui.showLoading()
		getCenter().then(res=>{
			this.userid = res.userid;
			mui.hideLoading()
		})
	},
	methods:{
		sureRegist(){
			let data = {
				parentId:this.userid,
				username:this.username,
				password:this.password
			};
			
			if(data.username=='' || data.password==''){
				mui.toast("用户名和密码不能为空")
				return;
			}
			
			registApi(data).then(res=>{
				if(res.message){
					mui.toast(res.message)
				}
				if(res==200){
					mui.alert("账号注册成功，请及时告知好友！")
				}
			})
		},
		onCopy(e){
			mui.alert("复制到剪贴板成功")
		},
		onError (e) {
		   mui.alert("复制失败")
		}
	}
}
</script>

<style scoped>
#regist img{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 20;
	margin-top: -44px;
}
#regist .mui-input-row label{
	text-align: left;
}
.mui-input-group:before{
	height:0;
}
</style>
